<script setup lang='ts'>
import { onMounted, ref } from "vue"
import { useRouter } from 'vue-router'
import { getRankInfo, getRankBook } from "@/api/index"
import BookViewThird from "@/components/BookViewThird.vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"

const categoryList: Array<string> = ["男生", "女生", "出版", "听书"]
const rankList: Array<string> = ["人气榜", "畅销榜", "新书榜", "免费榜", "完结榜"]

const rankInfo = ref<any>([])  //榜单信息
const rankBook = ref<any>([])  //选中榜单小说
const moreBookUrl = ref<string>()  //触底加载小说信息
const currentRank = ref<any>("")
const currentCategory = ref<string>("男生")
//触底加载
const loading = ref<boolean>(false)
const finished = ref<boolean>(false)
const isLoading = ref<boolean>(false)

const isLoadingPage = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)
const $router = useRouter()
onMounted(async () => {

    let res = await getRankInfo($router.currentRoute.value.query.url)
    rankInfo.value = res.data.data.list

    let rankBookRes
    if ($router.currentRoute.value.query.nav == '女生') {
        currentCategory.value = '女生'
        if ($router.currentRoute.value.query.type == '完结') {
            currentRank.value = '完结榜'
            rankBookRes = await getRankBook(rankInfo.value[1]?.subNavis[2].naviInfos[0].url)
        } else {
            currentRank.value = '人气榜'
            rankBookRes = await getRankBook(rankInfo.value[1]?.subNavis[0].naviInfos[0].url)
        }
    } else if ($router.currentRoute.value.query.nav == '出版') {
        currentCategory.value = '出版'
        if ($router.currentRoute.value.query.type == '新书') {
            currentRank.value = '新书榜'
            rankBookRes = await getRankBook(rankInfo.value[2]?.subNavis[2].naviInfos[0].url)
        } else if ($router.currentRoute.value.query.type == '排行') {
            currentRank.value = '畅销榜'
            rankBookRes = await getRankBook(rankInfo.value[2]?.subNavis[1].naviInfos[0].url)
        }
    }
    else {
        currentCategory.value = '男生'
        if ($router.currentRoute.value.query.type == '排行') {
            currentRank.value = '畅销榜'
            rankBookRes = await getRankBook(rankInfo.value[0]?.subNavis[1].naviInfos[0].url)
        } else if ($router.currentRoute.value.query.type == '完结') {
            currentRank.value = '完结榜'
            rankBookRes = await getRankBook(rankInfo.value[0]?.subNavis[2].naviInfos[0].url)
        } else {
            currentRank.value = '人气榜'
            rankBookRes = await getRankBook(rankInfo.value[0]?.subNavis[0].naviInfos[0].url)
        }
    }

    rankBook.value = rankBookRes.data.list
    moreBookUrl.value = rankBookRes.data.more?.url

    isLoadingPage.value = false;
})

//触底加载
const onLoad = async () => {
    if (!isLoading.value && moreBookUrl.value) {

        isLoading.value = true
        let moreBookRes = await getRankBook(moreBookUrl.value)

        rankBook.value = rankBook.value.concat(moreBookRes?.data?.list)
        moreBookUrl.value = moreBookRes.data.more?.url
        isLoading.value = false
        loading.value = false
    } else {
        finished.value = true
    }
}

//切换分类导航
const changeRankCategory = async (c: string) => {
    isLoadingPage.value = true

    currentCategory.value = c
    currentRank.value = "人气榜"
    finished.value = false
    let rankBookRes
    if (c == '男生') {
        rankBookRes = await getRankBook(rankInfo.value[0].subNavis[0].naviInfos[0].url)
    } else if (c == '女生') {
        rankBookRes = await getRankBook(rankInfo.value[1].subNavis[0].naviInfos[0].url)
    } else if (c == '出版') {
        rankBookRes = await getRankBook(rankInfo.value[2].subNavis[0].naviInfos[0].url)
    } else if (c == '听书') {
        rankBookRes = await getRankBook(rankInfo.value[3].subNavis[0].naviInfos[0].url)
    }
    rankBook.value = rankBookRes.data.list
    moreBookUrl.value = rankBookRes.data.more?.url
    isLoadingPage.value = false
}

//切换榜单
const changeRank = (i: string) => {
    isLoadingView.value = true
    currentRank.value = i
    rankInfo.value.filter((o: any) => {
        if (o.name == currentCategory.value) {
            o.subNavis.forEach(async (s: any, index: number) => {
                if (s.name == i) {

                    let rankBookRes = await getRankBook(o.subNavis[index].naviInfos[0].url)
                    rankBook.value = rankBookRes.data.list
                    moreBookUrl.value = rankBookRes.data.more?.url

                    isLoadingView.value = false

                }
            })
        }

    })

}

</script>

<template>
    <LoadingView v-if="isLoadingView" />
    <div class="rank">
        <!-- <LoadingPage v-if="isLoadingPage" /> -->
        <div class="rank-title">
            <img src="@/assets/imgs/返回1.png" alt="" @click="$router.back()">
            <ul class="nav">
                <li v-for="c, index in categoryList" :key="index" @click="changeRankCategory(c)">
                    <span :class="{ bold: c == currentCategory }">{{ c }}</span>
                    <span class="line" :class="{ bgc: c == currentCategory }"></span>
                </li>
            </ul>
        </div>
        <div class="rank-content">
            <div class="rang-left">
                <ul class="list">
                    <li v-for="i, index in rankList" :key="index" @click="changeRank(i)">
                        <span :class="{ col: i == currentRank }">{{ i }}</span>
                        <span class="line" :class="{ bgc: i == currentRank }"></span>
                    </li>
                </ul>
            </div>
            <div class="rank-book">
                <LoadingPage v-if="isLoadingPage" />
                <van-list v-model:loading="loading" :finished="finished" :immediate-check="false" :offset="1"
                    finished-text="没有更多了" loading-text="数据加载中" error-text="加载失败" @load="onLoad">
                    <div v-if="!isLoadingPage">
                        <BookViewThird v-for="book, index in rankBook" :key="index" :bookinfo="book"
                            :currentRank="currentRank" :index="index" />
                    </div>
                </van-list>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.rank {
    width: 100vw;
    height: 100vh;

    .rank-title {
        padding: 20rem 5rem 8rem 20rem;
        border-bottom: 1px solid #eee;
        display: flex;
        justify-content: space-between;

        img {
            width: 30rem;
            height: 25rem;
        }

        ul.nav {
            width: 80%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;

                span {
                    font-size: 16rem;

                    &.bold {
                        font-weight: bold;
                        font-size: 17rem;
                    }

                    &.line {
                        display: flex;
                        width: 10rem;
                        height: 2rem;
                    }

                    &.bgc {
                        background-color: #fc1c1c;

                    }
                }

            }
        }
    }

    .rank-content {
        padding: 0 15rem;
        height: calc(100% - 59rem);
        display: flex;


        .rang-left {
            ul.list {
                li {
                    display: flex;
                    align-items: center;
                    margin: 25rem 0;

                    span {
                        font-size: 16rem;

                        &.col {
                            color: #fc1c1c;
                        }

                        &.line {
                            display: flex;
                            width: 2rem;
                            height: 14rem;
                            margin-left: 15rem;
                        }

                        &.bgc {
                            background-color: #fc1c1c;

                        }
                    }
                }
            }
        }

        .rank-book {
            width: calc(100vw - 105rem);
            height: 100%;
            border-left: 1px solid #eee;
            flex-grow: 1;
            padding: 10rem 0 0 10rem;
            overflow: auto;
        }
    }
}
</style>
